import React from "react";



// name为必填
const Hello = ({ name }) => <div>Hello,{name}</div>;

// 约束 name 的类型
const SFCHello: React.SFC<{ name: string }> = ({ name }) => (
    <div>Hello,{name}</div>
);

class Message extends React.Component<
    {
        message: string;
    },
    {
        count: number;
    }
    > {

    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    public componentDidMount() {
        console.log('componentDidMount')



        // var button = document.getElementById('button11');
        // console.log(button)
        // Rx.Observable.fromEvent(button, 'click')
        // // 对流进行 scan (reduce) 操作，以获取 count 的值
        //     .scan((count:number) => db.count + 1, 0)
        //     // 每次改变时都在元素上设置 count
        //     .subscribe((count:number) => this.setState({
        //         count: db.count + 1
        //     }));
    }

    public increment = () => {
        const { count } = this.state;
        this.setState({
            count: count + 1
        });
    };
    public render() {
        return (
            <div id="button11">
                {this.props.message}
                {this.state.count}
            </div>
        );
    }
}

const App = () => (
    <>
        <div>book</div>
        <Hello name={123} />
        <SFCHello name="coder" />
        <Message message="点击dfafas" />
    </>
);

export default App;
